<template>
  <div>
    <div>表格选择器多选</div>
    <div class="w-240px flex py-20px">
      <TableSelect v-model="formData.selectArr" multiple :columns="columns" :fit-input-width="false"
        :requestApi="getUserInformationList" tableWidth="800px" :initTableParam="initTableParam" @change="handleChange"
        @reset="handleReset" :table-props="{
          label: 'name',
          value: 'name',
        }" data-key="userListPaginationQueryInformationDTOList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import TableSelect from '@/components/TableSelect/index.vue'; // 确保路径正确
import { getUserInformationList } from '@/api/modules/user';

// 表格列配置
const columns = ref([
  { type: 'selection', fixed: 'left', width: 80 },
  { label: '姓名', prop: 'name', minWidth: 80, search: { el: "input" } },
  { label: '登陆账号', prop: 'loginAccount', minWidth: 80, search: { el: "input" } },
]);

// 表格初始化查询参数
const initTableParam = ref({});

// 表单数据
const formData = ref({
  selectArr: [], // 初始化为空数组
});

// 处理选择变化
const handleChange = (selected: any) => {
  console.log('Selected:', selected);
};

// 处理重置
const handleReset = () => {
  console.log('Reset');
};
</script>

<style scoped>
.w-240px {
  width: 240px;
}

.flex {
  display: flex;
}

.py-20px {
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
